<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>个人中心,我的学生</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.mui-table-view:before {
				background: none;
			}
			
			.mui-table-view:after {
				background: none;
			}
			
			.head-container {
				width: 70px;
				height: 70px;
				overflow: hidden;
				border-radius: 50%;
				margin-left: 10px;
			}
			
			.mui-content {
				background-color: #FFFFFF;
			}
			
			input[type=checkbox] {
				visibility: hidden;
			}
			
			.checkboxFour {
				width: 25px;
				height: 25px;
				background: #FFFFFF;
				border-radius: 100%;
				position: relative;
				-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
				-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
				box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
			}
			
			
			.checkboxFour label {
				display: block;
				width: 20px;
				height: 20px;
				border-radius: 50px;
				-webkit-transition: all .5s ease;
				-moz-transition: all .5s ease;
				-moz-transition: all .5s ease;
				-ms-transition: all .5s ease;
				transition: all .5s ease;
				cursor: pointer;
				position: absolute;
				top: 2.5px;
				left: 2.5px;
				z-index: 1;
				background: #FFFFFF;
				-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.0);
				-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.0);
				box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.0);
			}
			
			.checkboxFour input[type=checkbox]:checked+label {
				background: #00d5c5;
			}
			
			.checkboxFour2 {
				width: 25px;
				height: 25px;
				background: #FFFFFF;
				border-radius: 100%;
				position: relative;
				-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
				-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
				box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
			}
			.checkboxFour2 label {
				display: block;
				width: 20px;
				height: 20px;
				border-radius: 50px;
				-webkit-transition: all .5s ease;
				-moz-transition: all .5s ease;
				-moz-transition: all .5s ease;
				-ms-transition: all .5s ease;
				transition: all .5s ease;
				cursor: pointer;
				position: absolute;
				top: 2.5px;
				left: 2.5px;
				z-index: 1;
				background: #FFFFFF;
				-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.0);
				-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.0);
				box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.0);
			}
			
			
			.checkboxFour2 input[type=checkbox]:checked+label {
				background: #00d5c5;
			}
			
			.div1{
				height: 70%;
				width: 2px;
				border: 1px solid #00d5c5;
			}
			.div2{
				
				height: 12%;
				width: 100%;
				background-image: url(../img/bg-studentbutton.png);
				background-size: 100% 100%;
				background-repeat:no-repeat;
				/*border: 1px solid #a3a3a3;
				border-bottom: 0px;
				border-top-right-radius: 10px;
				border-top-left-radius: 10px;
				box-shadow: 0 -2px 0 rgba(0,0,0,.5);*/
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的学生</h1>
			<button id="button-compile" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" onclick="onButtonCompile()" style="color: white;border: none;">编辑</button>
			<button id="button-cancle" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" onclick="onButtonCancel()" style="color: white;border: none;display: none;">取消</button>
		</header>
		<div class="mui-content fill-all">
			<div id="div-content" style="width: 100%;overflow-y: scroll;height: 100%;">
				<ul id="ul-content" class="mui-table-view">
					
					
					<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							<div class="flex v-center">
								<div class="checkboxFour" style="display: none;">
									<input type="checkbox" value="1" id="checkboxFourInput" name="">
									<label for="checkboxFourInput"></label>
								</div>

								<div class="head-container">
									<img src="../img/bg-01.png" class="fill-h fill-w" />
								</div>

								<div class="flex-1" style="margin-left: 10px;height: 60px;line-height: 60px;">
									跳跳跳糖
								</div>
							</div>
						</a>
					</li>-->

					
					
					
					
					
					

				</ul>
			</div>
			<div id="div-compile" class="flex v-center green div2" style="display: none;">
                 <div onclick="onCheckAll()" class="flex-1 flex v-center h-center">
                 	<div class="checkboxFour2" style="margin-right: 10px;">
						<input type="checkbox" value="2" id="checkboxFourInput2" disabled=disabled name="">
						<label for="checkboxFourInput2"></label>
					</div>
                 	全选
                 </div>
                 
                 <div class="div1">
                 	
                 </div>
                 
                 <div onclick="onUnbundle()" class="flex-1 flex v-center h-center">
                 	解绑(<span id="spannumber">0</span>)
                 </div>
			</div>

		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			mui.init();
			
			window.onload = function(){
				printLog("进来了1");
				//初始化页面的请求
			//	post(url,{
					//参数
				//},function(data){
					//返回成功
					if(true){
						var tex = "";
						for(var i= 0 ; i < 10 ; i++){
							//tex += '<li class="mui-table-view-cell"><a class="mui-navigate-right"><div class="flex v-center"><div onClick="onInputNumber('+ this.id +')" class="checkboxFour" style="display: none;"><input type="checkbox" value="1" id="checkboxFourInput" name=""><label for="checkboxFourInput"></label></div><div class="head-container"><img src="../img/bg-01.png" class="fill-h fill-w" /></div><div class="flex-1" style="margin-left: 10px;height: 60px;line-height: 60px;">跳跳糖</div></div></a></li>';
						     tex += '<li class="mui-table-view-cell"><a class="mui-navigate-right"><div class="flex v-center on-show"><div onClick="onInputNumber('+ i +')" class="checkboxFour" style="display: none;"><input type="checkbox" value="1" id= "'+ i +'" name=""><label for="'+ i +'"></label></div><div onClick="onShowDetail('+ i +')" class="head-container"><img src="../img/bg-01.png" class="fill-h fill-w" /></div><div onClick="onShowDetail('+ i +')" class="flex-1" style="margin-left: 10px;height: 60px;line-height: 60px;">跳跳糖</div></div></a></li>';
						
						}
						document.getElementById("ul-content").innerHTML = tex;
											
					}
					
				//})																
			}
			//
			function onInputNumber(id){
				//printLog("点击了第"+id+"条");
//				var check = document.getElementById(id).checked;
//				var number = parseInt(document.getElementById("spannumber").innerHTML);
//				printLog(number+"个");
//				//如果这个数目为false,数量减一,为true加一
//				if(check){
//					number++;
//				}else{
//					if(number <= 0){
//						number = 0;
//					}else{
//						number--;
//					}					
//				}
//				document.getElementById("spannumber").innerHTML = number+"";
                //获取到所有的需要显示的特定class的div
			    showCount();
			}
			
			function showCount(){
				var tem = document.querySelectorAll("input[value='1']");			   
			    var number = 0;
			    for(var b = 0; b < tem.length; b++){			    
			    	if(tem[b].checked){
			    		number++;			    		
			    	}
			    }
			    document.getElementById("spannumber").innerHTML = number+"";
			}
			
			
			//显示学生详情
			function onShowDetail(id){
				//printLog("点击了");
				mui.openWindow({
					url: "my-student-details.html",
					id:'my-student-details.html',  
				    extras:{  
				        id:id				        
				    }  
			    });
			}
		

			//编辑
			function onButtonCompile() {				
                document.getElementById("div-compile").style.display = "";			    
			    document.getElementById("button-compile").style.display = "none";
			    document.getElementById("button-cancle").style.display = "inline";
			    document.getElementById("div-content").style.height = "88%";
			    //获取到所有的需要显示的特定class的div
			    var tem = document.querySelectorAll("div[class='checkboxFour']");
			    for(var b = 0; b < tem.length; b++){
			    	tem[b].style.display = "inline";
			    }			    			 			    
			}

			//取消
			function onButtonCancel() {
                document.getElementById("div-compile").style.display = "none";           
                document.getElementById("button-compile").style.display = "inline";
			    document.getElementById("button-cancle").style.display = "none";
			    document.getElementById("div-content").style.height = "100%";
			    
			    //获取到所有的需要显示的特定class的div
			    var tem = document.querySelectorAll("div[class='checkboxFour']");
			    for(var b = 0; b < tem.length; b++){
			    	tem[b].style.display = "none";
			    }
			}
			
			
			//全选
			function onCheckAll(){
				var check = document.getElementById("checkboxFourInput2");
				var checked = check.checked;
				//printLog(checked);
				setChecked(checked);
				showCount();
				check.checked = !checked;
				
			}
			
			//解绑,如果没有选择的话不能解绑
			function onUnbundle(){
				printLog("解绑");
			}
			
			function setChecked(boo){
				//获取到所有的需要显示的特定class的div
			    var tem = document.querySelectorAll("input[value='1']");
			    printLog(tem.length+"---"+boo);
			    for(var b = 0; b < tem.length; b++){
			    	tem[b].checked = !boo;
			    	//printLog(tem[b].checked+"-===========-");
			    }
			}
			
			
			
		</script>
	</body>

</html>